<template>
  <view class="page page-primary page-grey page-contact">
    <page-header theme="colorful"></page-header>
    <view class="page-contact-content">
      <image src="/static/images/homePage/contact.png" class="contact-image"></image>
      <view class="contact-tips">我们始终把用户的需求放在第一位，‌欢迎您提出任何意见和建议。‌</view>
      <view class="contact-item" v-for="item in contactList" :key="item.name">
        <fui-text :text="`${item.name}：`" size="24" color="#666"></fui-text>
        <fui-link :href="`tel:${item.phoneNumber}`"><fui-text :text="item.phoneNumber" :padding="[0, '10rpx']" size="28" color="#333" fontWeight="bold"></fui-text></fui-link>
        <fui-link :href="`tel:${item.phoneNumber}`"><image src="/static/images/homePage/dianhua.png" class="contact-item-icon"></image></fui-link>
      </view>
    </view>
  </view>
</template>


<script setup>
import { ref } from 'vue'
import pageHeader from '@/components/header'

const contactList = ref([
  { name: '一键投诉', phoneNumber: '15719588556' },
  { name: '技术服务', phoneNumber: '19995277551' },
  { name: '产品反馈', phoneNumber: '17711801500' },
])
</script>

<style lang="scss" scoped>
.page-contact {
  padding: 120rpx 36rpx 36rpx;
  .contact-tips {
    width: 90%;
    margin: 0 auto 64rpx;
    text-align: center;
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }
  .page-contact-content {
    position: relative;
    box-shadow: 0 0 6px rgb(0 0 0 / 8%);
    border-radius: 20rpx;
    background-color: #fff;
    margin: 0 auto;
    padding: 160rpx 48rpx 60rpx;
    .contact-image {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100rpx;
      height: 100rpx;
      box-shadow: 0 0 6px rgb(0 0 0 / 8%);
      border-radius: 50%;
      background-color: #fff;
      padding: 30rpx;
    }
    .contact-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 24rpx;
      .contact-item-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>